<template>
  <div class="home">
    
    <span v-if="modalState">33</span>
   
    <van-button type="primary" @click="toggleModalState">主要按钮</van-button>
  
    <!-- <canvas class="canvas"></canvas> -->

    <div class="container">
      <div class="dot" @click="click">0</div>
      <div class="img">
        <img src="img/ic_home_third_prize@2x.png">
      </div>
       <div class="img-two" :style="{top: top + 'px', left: left + 'px'}">
        <img src="img/ic_home_third_prize@2x.png">
      </div>
     
     
      
    
    </div>

    
  </div>
</template>

<script>

import { ref, reactive, readonly } from "vue";
import {queryWechatGroupById} from '@/lib/api'
import {rpx2px} from '../lib/canvasUtil'
export default {
  name: 'Home',
  components: {
    
  },
  
  setup() {
    const modalState = ref(true);
   
    const count = ref(0)
    const object = reactive({demo: '张三', modalState, count, })
    const original = reactive({ count: 0 })
    readonly(original)
    original.count++
    object.count = 2
    console.log(count.value)
    
    
    const toggleModalState = async  () =>  {
     await new Promise((reject) => {
        setTimeout(() => {
          reject(1)
        }, 20)
      })
      modalState.value = !modalState.value;
      
      queryWechatGroupById({id: 3})
    };

   
   
    return {
      modalState,
      toggleModalState,
      object
    }

  },
  data() {
    return {
      top: 0,
      left: 0,

    }
  },
  mounted() {
    // this.canvasInit()
    
    this.init()
  },
  methods: {
    click() {
      this.top = 100
      this.left = 100;

    },
    init() {

   

    },
    canvasInit() {
      let cx = document.querySelector('canvas').getContext('2d');
      console.log(cx)
      cx.fillStyle = '#FF7F1F'
      console.log(rpx2px(50))
      cx.fillRect(0, 0, 50, 20)
      cx.lineWidth = 4
      cx.lineCap = "butt"
 
      
    }
   
  },
 
}
</script>
<style lang="scss" scoped>
.home {
  color: red;
  font-size: 28px;
  span {
    color: gold;
  }
}
.item-li {
  line-height: 100px;
  text-align: center;
  font-size: 28px;
  
}
.item-li::after {
  background-color: #808080;
}
.main {
  // display: flex;
  .left {
    flex: 1;
    .dargable {
      height: 50px;
      
    }    
  }
  .right {
    flex: 1
  }
}
.canvas {
  height: 600px;
  width: 400px;
  border: 1px solid red;
}
.container {
  position: relative;
  height: 500px;
  width: 400px;
  border: 1px solid red;
  .dot {
    width: 50px;
    line-height: 50px;
    background-color: red;
    color:#fff;
    border-radius: 25px;
    text-align: center;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
  }

  .img, .img-two {
    width: 100px;
    height: 100px;
    position: absolute;
    transition: all .3s;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .img {
    left: 20px;
    top: 50px;
  }
  .img-two {
    right: 20px;
    top: 50px;

  }

}
.compound-img-animation {
  animation: .3s compound ease-in;
}
@keyframes compound {
  0% {
    transform: translate3d();

  }
  100% {

  }
  
}

</style>
